<!-- 轮播图 -->
<template>
    <div id="swiperTop">
  <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in state.images" :key="image">
    <img :src="image.pic" />
  </van-swipe-item>
</van-swipe>
</div> 
</template>
<script>
// import axios from  'axios'
import {reactive, onMounted } from 'vue'; 
import { getBanner } from '@/request/api/home.js';
export default {
  
    setup(){
        const  state = reactive( {
      images:[  
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ]});
    onMounted(async()=>{
        //     axios.get('http://localhost:3000/banner?type=2').then((res)=>{
        //     console.log(res)
        //    state.images = res.data.banners 
        //    console.log(state.images)
        // })
       let res = await getBanner();
       state.images = res.data.banners
        console.log(res);
            })
 
      return {state};
    }
  }
</script>
<style lang="less">
#swiperTop{
.van-swipe{
    width: 100%;
    height: 3rem;
     .van-swipe-item{
           padding: 0 0.1rem;
            img{
                width: 100%;
                height:100%;
                border-radius: 0.2rem;
                
            }
        }
    .van-swiper_indicator--active{
        background-color: rgb(219, 130, 130);
    }
    }

}
</style>